import React, { useCallback } from 'react';
import { DROPDOWN_OPTIONS } from 'configs/searchPage';
import { useSearchPageStoreContext } from 'context/searchPageStore';
import { observer } from 'mobx-react-lite';

import Button from 'components/Button';
import { SearchIcon } from 'components/icons';
import SearchInput from 'components/Input/SearchInput';
import MultiDropdown, { Option } from 'components/MultiDropdown';
import { classnames } from 'utils';

import classes from './SearchContainer.module.scss';

const cnSearchContainer = classnames(classes, 'searchContainer');

const SearchContainer: React.FC = () => {
    const {
        searchPage: { setCurrentPage },
        orgReposContainer: { fetchOrganizationRepos, onClickSearchOwnerHandle },
        searchContainer: {
            setDropdownValues,
            githubOwnersMatch,
            setInputValue,
            dropdownValues,
            setInputSearchValue,
            inputValue,
        },
    } = useSearchPageStoreContext();

    const setInputDropdownValue = useCallback(
        (values: Option[]) => {
            setCurrentPage(1);
            setDropdownValues(values);
        },
        [setCurrentPage, setDropdownValues],
    );

    const getDropdownTitleHandle = useCallback(
        (values: Option[]) => (values.length === 0 ? 'Type' : values.map(({ value }) => value).join(', ')),
        [],
    );

    const onClickOptionHandle = useCallback(
        (value: string) => {
            setInputValue(value);
            setCurrentPage(1);
            fetchOrganizationRepos({
                organization: value,
                currentPage: 1,
                type: dropdownValues.map(({ key }) => key).join(','),
            });
        },
        [dropdownValues],
    );

    return (
        <div className={cnSearchContainer()}>
            <MultiDropdown
                options={DROPDOWN_OPTIONS}
                value={dropdownValues}
                onChange={setInputDropdownValue}
                getTitle={getDropdownTitleHandle}
                className={cnSearchContainer('dropdown')}
                inputContainerClassName={cnSearchContainer('input-container')}
                optionsClassName={cnSearchContainer('multidropdown-options')}
                optionClassName={cnSearchContainer('multidropdown-option')}
            />
            <div className={cnSearchContainer('search')}>
                <SearchInput
                    options={githubOwnersMatch}
                    value={inputValue ?? ''}
                    placeholder="Owner"
                    onChange={setInputSearchValue}
                    className={cnSearchContainer('searchinput')}
                    inputContainerClassName={cnSearchContainer('input-container')}
                    optionsClassName={cnSearchContainer('multidropdown-options')}
                    optionClassName={cnSearchContainer('multidropdown-option')}
                    onOptionClick={onClickOptionHandle}
                />
                <Button onClick={onClickSearchOwnerHandle}>
                    <SearchIcon />
                </Button>
            </div>
        </div>
    );
};

export default observer(SearchContainer);
